<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>员工管理</title>
</head>

<body>

  <div id="app">
    <div>{{title}}</div>
    <!-- 查询表单 -->
    <div>
      部门：
      <!-- v-if和v-else就是if-else判断结构，必须是相邻元素 -->
      <span v-if="queryInfo.deptId==-1">
        全部部门
      </span>
      <span v-else>
        {{dept.selected.deptName}}
      </span>
      <!-- <input type="text" v-model="queryInfo.deptId"> -->
      <button @click="dept.mode='query';queryDept();">选择部门</button>

      姓名：<input type="text" v-model="queryInfo.employeeName">
      电话：<input type="text" v-model="queryInfo.phone">
      排序：
      <select v-model="queryInfo.orderBy">
        <option v-for="d in orderByList" :value="d.value">
          {{d.text}}
        </option>
      </select>

      <button @click="query">查询</button>
      <button @click="resetQuery">重置</button>
    </div>
    ===={{dept.mode}}====
    <!-- 添加的部分 -->
    <div>
      <span v-if="addInfo.deptId==-1">
        请选择部门
      </span>
      <span v-else>
        {{dept.selectedAdd.deptName}}
      </span>

      <button @click="dept.mode='add';queryDept();">部门选择</button>
      姓名:<input type="text" v-model="addInfo.employeeName">
      电话:<input type="text" v-model="addInfo.phone">
      <button @click="add">添加</button>
      <button>重填</button>
      {{addInfo}}
    </div>

    <!-- 数据呈现的部分 -->
    <div>
      <table style="width: 100%;">

        <thead>
          <tr>
            <th>所属部门</th>
            <th>姓名</th>
            <th>电话</th>
            <th>修改时间</th>
            <th>操作</th>
          </tr>
        </thead>

        <tbody>
          <tr v-for="d in list">
            <td>{{d.dept.deptName}}</td>
            <td>{{d.employeeName}}</td>
            <td>{{d.phone}}</td>
            <td>{{d.lastupdate | formatDate}}</td>
            <td>
              <button @click="showModi(d)">修改</button>
              <button @click="del(d)">删除</button>
            </td>
          </tr>
        </tbody>

      </table>


      {{page}}
      <hr>
      <!-- {{list}} -->
    </div>

    <hr>

    <!-- 修改的部分 -->
    <div v-if="modiVisible">
      {{modiInfo.dept.deptName}}
      <button @click="dept.mode='modi';queryDept();">部门选择</button>
      姓名:<input type="text" v-model="modiInfo.employeeName">
      电话:<input type="text" v-model="modiInfo.phone">
      <button @click="modify">保存</button>
      <button @click="modiVisible=false;dept.visible=false">关闭</button>
      <hr>
      {{modiInfo}}
    </div>

    <hr>
    <!-- 部门选择的部分 -->
    <div v-if="dept.visible">

      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>名称</th>
            <th>描述</th>
            <th>最后修改时间</th>
            <th>操作</th>
          </tr>
        </thead>

        <tbody>
          <tr v-for="d in dept.list">
            <td>{{d.deptId}}</td>
            <td>{{d.deptName}}</td>
            <td>{{d.deptInfo}}</td>
            <td>
              {{ d.lastupdate | formatDate }}
            </td>
            <td>
              <button @click="selectDept(d)">选择</button>
            </td>
          </tr>

        </tbody>

      </table>


      <!-- 分页的部分 -->
      <div>
        <a href="javascript:void(0)" @click="toDeptPage(dept.page.pageNumber-1)">上一页</a>
        |
        当前页/总页数/记录数：
        {{dept.page.pageNumber}}/
        {{dept.page.pageCount}}/
        {{dept.page.total}}
        |
        <a href="javascript:void(0)" @click="toDeptPage(dept.page.pageNumber+1)">上一页</a>
      </div>

    </div>




  </div>

  <script src="../lib/vue.min.js"></script>
  <script src="../lib/axios.min.js"></script>
  <script src="../lib/qs.min.js"></script>
  <script src="../lib/spark-md5.min.js"></script>
  <script src="../js/ajax.js"></script>
  <script src="../js/filters.js"></script>

  <script src="js/emp.js"></script>

</body>

</html>